<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>新增商品</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="{{URL::asset('layui/css/layui.css')}}"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<form class="layui-form" action="">
    <fieldset class="layui-elem-field site-demo-button" style="margin-top: 20px;">
    <legend>基本信息</legend>
        <div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品分类</label>
                <div class="layui-input-block">
                    <select id="classId" name="class_id" lay-filter="aihao">
                        <option value="">请选择分类</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">商品名称</label>
                <div class="layui-input-block">
                    <input type="text" name="goods_name" autocomplete="off" placeholder="商品名称" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">价格</label>
                <div class="layui-input-block">
                    <input type="text" name="price" autocomplete="off" placeholder="价格" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮费</label>
                <div class="layui-input-block">
                    <input type="radio" name="is_free_shopping" value="1" title="包邮" checked="">
                    <input type="radio" name="is_free_shopping" value="0" title="到付">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">商品图</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <input type="hidden" id="image" name="image" autocomplete="off" class="layui-input">
                        <button type="button" class="layui-btn" id="test1">选择图片</button>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图:
                            <div class="layui-upload-list" id="demo1"></div>
                        </blockquote>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">详情图</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <input type="hidden" id="detail" name="detail" autocomplete="off" class="layui-input">
                        <button type="button" class="layui-btn" id="test2">选择图片</button>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图:
                            <div class="layui-upload-list" id="demo2"></div>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
    <fieldset class="layui-elem-field site-demo-button" style="margin-top: 20px;">
        <legend>规格信息<button type="button" id="addSku" class="layui-btn layui-btn-normal layui-btn-sm">添加规格</button></legend>
        <input type="hidden" id="sku_info" name="sku_info" autocomplete="off" class="layui-input">
        <blockquote class="layui-elem-quote layui-quote-nm" id="sku_block">

        </blockquote>
            <div id="sku">
                <div class="layui-form-item">
                    <label class="layui-form-label">规格</label>
                    <div class="layui-input-inline">
                        <input type="text" id="sku_name" autocomplete="off" placeholder="规格名称" class="layui-input">
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" id="sku_price" autocomplete="off" placeholder="价格" class="layui-input">
                    </div>
                    <div class="layui-input-inline">
                        <button type="button" class="layui-btn" id="test10">上传</button>
                    </div>
                </div>
            </div>
    </fieldset>
    <fieldset class="layui-elem-field site-demo-button" style="margin-top: 20px;">
        <legend>颜色信息<button type="button" id="addColor" class="layui-btn layui-btn-normal layui-btn-sm">添加颜色</button></legend>
        <input type="hidden" id="color_info" name="color_info" autocomplete="off"  class="layui-input">
        <blockquote class="layui-elem-quote layui-quote-nm" id="color_block">

        </blockquote>
            <div id="color">
                <div class="layui-form-item">
                    <label class="layui-form-label">颜色</label>
                    <div class="layui-input-inline">
                        <input type="text" id="color_name" autocomplete="off" placeholder="颜色名称" class="layui-input">
                    </div>
                    <div class="layui-input-inline">
                        <div class="layui-upload" style="width:300px;">
                            <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
                            <button type="button" class="layui-btn" id="test9">上传</button>
                        </div>
                    </div>
                </div>
            </div>
    </fieldset>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" lay-submit="" lay-filter="demo1">提交</button>
            <button type="button" id="close" class="layui-btn layui-btn-primary">取消</button>
        </div>
    </div>
</form>

<script src="{{URL::asset('layui/layui.js')}}" charset="utf-8"></script>
<script src="{{URL::asset('js/jquery-3.1.1.min.js')}}"></script>
<script>
    layui.use(['form','upload'], function(){
        var form = layui.form
            ,upload = layui.upload
            ,layer = layui.layer;

        var index = parent.layer.getFrameIndex(window.name);

        $('#sku').hide();
        $('#color').hide();

        $('#addSku').click(function () {
            $('#sku').show();
        });
        $('#addColor').click(function () {
            $('#color').show();
        });
        
        $('#test10').click(function () {
            var sku_name = $('#sku_name').val();
            var sku_price = $('#sku_price').val();
            if (sku_name.length<1 || sku_price.length<1){
                layer.msg('必填项不能为空');
                return
            }else{
                var sku = $('#sku_info');
                var str = sku.val()+','+sku_name+'|&|'+sku_price;
                sku.val(str);
                $('#sku_block').append('<span style="margin-left: 5px;" class="layui-badge layui-bg-blue">'+sku_name+'</span>');
                $('#sku_name').val('');
                $('#sku_price').val('');
                $('#sku').hide();
            }
        });

        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 1){
                    return '必填项不能为空';
                }
            }
        });

        //商品类型
        goodsTypeList();


        //单图片上传
        upload.render({
            elem: '#test1'
            ,url: '/admin/upload'
            ,field:'files'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 80px;height: 80px;">')
                });
            }
            ,done: function(res){
                var image = $('#image').val();
                if (res.code==200){
                    var image = image+','+res.data.image;
                    $('#image').val(image);
                }
            }
        });

        //单图片上传
        upload.render({
            elem: '#test2'
            ,url: '/admin/upload'
            ,field:'files'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img"  style="width: 80px;height: 80px;">')
                });
            }
            ,done: function(res){
                var image = $('#detail').val();
                if (res.code==200){
                    var image = image+','+res.data.image;
                    $('#detail').val(image);
                }
            }
        });

        //选完文件后不自动上传
        upload.render({
            elem: '#test8'
            ,url: '/admin/upload'
            ,field:'files'
            ,auto: false
            ,bindAction: '#test9'
            ,done: function(res){
                var color_name = $('#color_name').val();
                var color = $('#color_info');
                var str = color.val()+','+color_name+'|&|'+res.data.image;
                color.val(str);
                $('#color_block').append('<span style="margin-left: 5px;" class="layui-badge layui-bg-blue">'+color_name+'</span>');
                $('#color_name').val('');
                $('#color').hide();
            }
        });

        //监听提交
        form.on('submit(demo1)', function(data){
            var f = data.field;
            var where = {"class_id":f.class_id,"goods_name":f.goods_name,"price":f.price,"is_free_shopping":f.is_free_shopping,"image":(f.image).substr(1),"detail":(f.detail).substr(1),"sku":(f.sku_info).substr(1),"color":(f.color_info).substr(1)};
            var url = "/admin/goods/list/add";
            $.post(url,where,function (d) {
                if (d.code==200){
                    layer.msg("商品新增成功!");
                    setTimeout(function () {
                        window.parent.location.reload();
                    },500)
                }else{
                    layer.msg("商品新增失败!");
                }
            });

            return false;
        });

        function goodsTypeList() {
            var url = "/admin/class/list/api";
            var where = {"page":1,"limit":50};
            $.get(url,where,function (d) {
                if (d.count>0){
                    $.each(d.data,function (i,v) {
                        var jd = '<option value="'+v.id+'">'+v.class_name+'</option>';
                        $('#classId').append(jd);
                    });
                }
                form.render('select');
            });
        }

        $('#close').click(function(){
            parent.layer.close(index);
        });
    });
</script>

</body>
</html>